<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{ msg }}-{{ foo.bar }}</div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: 'This is a message',
          foo: {}
        }
      }
    })
    // 1. $mount 挂载
    // vm.$mount('#app')
    // console.log(vm.$el)
    // document.body.appendChild(vm.$el)
    // 2. $options
    // console.log(vm.$options)
    // 3. $watch
    // vm.$watch('msg', (newValue, oldValue) => {
    //   console.log(newValue)
    // })
    // vm.msg = 123
    // vm.msg = 321
    // 4.$nextTick
    // vm.msg = 'change msg'
    // vm.$nextTick().then(() => {
    //   console.log(document.getElementById('app').innerHTML)
    // })
    // vm.$nextTick(() => {
    //   console.log(document.getElementById('app').innerHTML)
    // })
    // 5. $set
    vm.$set(vm.foo, 'bar', 'bar')
  </script>
</html>
